<template>
  <view
    class="tn-icon"
    :class="[iconClass]"
    :style="iconStyle"
  >
    <view
      v-if="isImg"
      class="tn-icon__image">
      <image
        class="image"
        :src="icon"
        :mode="imgMode"
      />
    </view>
    <text
      v-else
      class="tn-icon__icon"
      :class="[`tn-icon-${icon}`]"
	  :style="'color:'+color"
    ></text>
  </view>
</template>

<script>
  export default {
	name:"pm-icon",
    props: {
      /** 图标名称，可以传入图片地址(支持jpg、jpeg、png, gif) */
      icon: {
        type: String,
        required: true
      },
      /** 图标大小，如果是图片类型的图片则定义宽高(内置sm、lg、xl) */
      size: {
        type: [String, Number],
        default: ''
      },
	  color: {
	    type: [String],
	    default: '#CCC'
	  },
      /** 是否加粗图标 */
      bold: {
        type: Boolean,
        default: false
      },
      /** 图片模式mode，当图片为图片时生效 */
      imgMode: {
        type: String,
        default: 'scaleToFill'
      },
      /** 垂直方向的偏移量，单位rpx */
      top: {
        type: [String, Number],
        default: 0
      },
      /** 公共class名称 */
      className: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        
      }
    },
    computed: {
      /** 判断是否为图片 */
      isImg() {
        return this.icon.indexOf('/') !== -1
      },
      /** 图标类值 */
      iconClass() {
        let clazz = []
        if (this.isImg) {
          clazz.push('tn-icon--image')
        }
        if (!!this.size && this.isDefaultSize) {
          clazz.push(`tn-icon--${this.size}`)
        }
        if (this.bold) {
          clazz.push('bold')
        }
        if (!!this.className) {
          clazz.push(this.className)
        }
        return clazz.join(' ')
      },
      /** 图标对应的样式 */
      iconStyle() {
        let style = {}
        if (!this.isDefaultSize) {
          const size = this._handleValueWithUnit(this.size)
          if (this.isImg) {
            style.width = size
            style.height = size
          } else {
            style.fontSize = size
          }
        }
        if (!!this.top) {
          style.top = this._handleValueWithUnit(this.top)
        }
        return style
      },
      /** 判断size是否为sm、lg、xl的值 */
      isDefaultSize() {
        return ['sm', 'lg', 'xl'].includes(this.size)
      }
    },
    methods: {
      
      
      // 自动判断并处理单位
      _handleValueWithUnit(value, unit = 'rpx', returnEmpty = true) {
        if (!value) return returnEmpty ? '' : '0px'
        if (typeof value === 'string' && /(%|px|rpx|auto)$/.test(value)) return value
        return value + unit
      }
      
    }
  }
</script>

<style lang="scss" scoped>
  .tn-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    border-radius: inherit;
    
    &.bold {
      font-weight: bold;
    }
  
    &--image {
      width: 38rpx;
      height: 38rpx;
    }
  
    &__image {
      display: inline-block;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      .image {
        width: 100%;
        height: 100%;
        will-change: transform;
        border-radius: inherit;
      }
    }
  
    /* 内置尺寸 start */
    &--sm {
      font-size: 24rpx;
      &.tn-icon--image {
        width: 30rpx;
        height: 30rpx;
      }
    }
    &--lg {
      font-size: 34rpx;
      &.tn-icon--image {
        width: 42rpx;
        height: 42rpx;
      }
    }
    &--xl {
      font-size: 50rpx;
	  // font-size: 40rpx;
      &.tn-icon--image {
        width: 48rpx;
        height: 48rpx;
      } 
    }
    /* 内置尺寸 end */
	/* url('//at.alicdn.com/t/c/font_3063751_tzqyvftfmc.woff?t=1675820911501') format('woff'),
	url('//at.alicdn.com/t/c/font_3063751_tzqyvftfmc.ttf?t=1675820911501') format('truetype'); */
  }
</style>

<style scoped>
  @charset "UTF-8";
  
  @font-face {
    font-family: "tuniaoFont"; /* Project id 3063751 */
    src: 	
		 url('//mp-a1f0880d-a24a-4252-92d0-7c10a4ed6c8e.cdn.bspapp.com/cloudstorage/5a6c5fc7-dcd8-4109-8660-8417012ced90.woff') format('woff'),
		 url('//mp-a1f0880d-a24a-4252-92d0-7c10a4ed6c8e.cdn.bspapp.com/cloudstorage/73a1f952-f8d9-4322-809d-2586f220ab5e.ttf') format('truetype');
  }
  
  [class*='tn-icon-'] {
    font-family: 'tuniaoFont' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    text-decoration: none;
  }
  
  .tn-icon-escalator:before {
    content: "\e98d";
  }
  
  .tn-icon-suitcase:before {
    content: "\e989";
  }
  
  .tn-icon-suitcase-fill:before {
    content: "\e98a";
  }
  
  .tn-icon-food:before {
    content: "\e98b";
  }
  
  .tn-icon-food-fill:before {
    content: "\e98c";
  }
  
  .tn-icon-add-square-fill:before {
    content: "\e904";
  }
  
  .tn-icon-cute:before {
    content: "\e988";
  }
  
  .tn-icon-compress:before {
    content: "\e96e";
  }
  
  .tn-icon-expend:before {
    content: "\e96f";
  }
  
  .tn-icon-windows:before {
    content: "\e970";
  }
  
  .tn-icon-trademark:before {
    content: "\e971";
  }
  
  .tn-icon-tailor:before {
    content: "\e972";
  }
  
  .tn-icon-move:before {
    content: "\e973";
  }
  
  .tn-icon-pillow:before {
    content: "\e974";
  }
  
  .tn-icon-bathtub:before {
    content: "\e975";
  }
  
  .tn-icon-buy:before {
    content: "\e976";
  }
  
  .tn-icon-buy-fill:before {
    content: "\e977";
  }
  
  .tn-icon-allday:before {
    content: "\e978";
  }
  
  .tn-icon-home-love-fill:before {
    content: "\e979";
  }
  
  .tn-icon-home-love:before {
    content: "\e97a";
  }
  
  .tn-icon-gesture-two:before {
    content: "\e97b";
  }
  
  .tn-icon-gesture-four:before {
    content: "\e97c";
  }
  
  .tn-icon-gesture-five:before {
    content: "\e97d";
  }
  
  .tn-icon-gesture-one:before {
    content: "\e97e";
  }
  
  .tn-icon-gesture-three:before {
    content: "\e97f";
  }
  
  .tn-icon-gesture-dropdown:before {
    content: "\e980";
  }
  
  .tn-icon-plant-fill:before {
    content: "\e981";
  }
  
  .tn-icon-plant:before {
    content: "\e982";
  }
  
  .tn-icon-pillow-fill:before {
    content: "\e983";
  }
  
  .tn-icon-bathtub-fill:before {
    content: "\e984";
  }
  
  .tn-icon-wheelchair:before {
    content: "\e985";
  }
  
  .tn-icon-narrow-all:before {
    content: "\e986";
  }
  
  .tn-icon-fullscreen-all:before {
    content: "\e987";
  }
  
  .tn-icon-close-square-fill:before {
    content: "\e945";
  }
  
  .tn-icon-add-square:before {
    content: "\e962";
  }
  
  .tn-icon-close-square:before {
    content: "\e963";
  }
  
  .tn-icon-my-reduce:before {
    content: "\e964";
  }
  
  .tn-icon-square-fill:before {
    content: "\e965";
  }
  
  .tn-icon-pay-fill:before {
    content: "\e966";
  }
  
  .tn-icon-commissary:before {
    content: "\e967";
  }
  
  .tn-icon-commissary-fill:before {
    content: "\e968";
  }
  
  .tn-icon-notice-no-fill:before {
    content: "\e969";
  }
  
  .tn-icon-cross-fill:before {
    content: "\e96a";
  }
  
  .tn-icon-nintendo-switch:before {
    content: "\e96b";
  }
  
  .tn-icon-mammoth:before {
    content: "\e96c";
  }
  
  .tn-icon-open:before {
    content: "\e96d";
  }
  
  .tn-icon-bed-fill:before {
    content: "\e916";
  }
  
  .tn-icon-bed:before {
    content: "\e961";
  }
  
  .tn-icon-menu-flex-fill:before {
    content: "\e956";
  }
  
  .tn-icon-menu-flex:before {
    content: "\e957";
  }
  
  .tn-icon-logistics-fill:before {
    content: "\e958";
  }
  
  .tn-icon-ghost-fill:before {
    content: "\e959";
  }
  
  .tn-icon-keyboard-circle-fill:before {
    content: "\e95a";
  }
  
  .tn-icon-brand-fill:before {
    content: "\e95b";
  }
  
  .tn-icon-clear-fill:before {
    content: "\e95c";
  }
  
  .tn-icon-mouse-fill:before {
    content: "\e95d";
  }
  
  .tn-icon-brand:before {
    content: "\e95e";
  }
  
  .tn-icon-monitor-fill:before {
    content: "\e95f";
  }
  
  .tn-icon-covid-19-fill:before {
    content: "\e960";
  }
  
  .tn-icon-install-fill:before {
    content: "\e936";
  }
  
  .tn-icon-install:before {
    content: "\e955";
  }
  
  .tn-icon-restroom-female:before {
    content: "\e953";
  }
  
  .tn-icon-restroom-male:before {
    content: "\e954";
  }
  
  .tn-icon-first:before {
    content: "\e950";
  }
  
  .tn-icon-third:before {
    content: "\e951";
  }
  
  .tn-icon-second:before {
    content: "\e952";
  }
  
  .tn-icon-ninja:before {
    content: "\e94b";
  }
  
  .tn-icon-program:before {
    content: "\e94c";
  }
  
  .tn-icon-program-fill:before {
    content: "\e94d";
  }
  
  .tn-icon-circle-more:before {
    content: "\e94e";
  }
  
  .tn-icon-windmill:before {
    content: "\e94f";
  }
  
  .tn-icon-alien:before {
    content: "\e946";
  }
  
  .tn-icon-taichi:before {
    content: "\e947";
  }
  
  .tn-icon-knot:before {
    content: "\e948";
  }
  
  .tn-icon-snowflake:before {
    content: "\e949";
  }
  
  .tn-icon-whale:before {
    content: "\e94a";
  }
  
  .tn-icon-dragon:before {
    content: "\e944";
  }
  
  .tn-icon-home-in-fill:before {
    content: "\e942";
  }
  
  .tn-icon-home-in:before {
    content: "\e943";
  }
  
  .tn-icon-home-loading:before {
    content: "\e940";
  }
  
  .tn-icon-home-loading-fill:before {
    content: "\e941";
  }
  
  .tn-icon-cell:before {
    content: "\e93b";
  }
  
  .tn-icon-loading:before {
    content: "\e93c";
  }
  
  .tn-icon-orange:before {
    content: "\e93d";
  }
  
  .tn-icon-bigbug:before {
    content: "\e93e";
  }
  
  .tn-icon-dinosaur:before {
    content: "\e93f";
  }
  
  .tn-icon-dna:before {
    content: "\e931";
  }
  
  .tn-icon-chain:before {
    content: "\e932";
  }
  
  .tn-icon-email:before {
    content: "\e933";
  }
  
  .tn-icon-education:before {
    content: "\e934";
  }
  
  .tn-icon-english:before {
    content: "\e935";
  }
  
  .tn-icon-seal:before {
    content: "\e937";
  }
  
  .tn-icon-theme:before {
    content: "\e938";
  }
  
  .tn-icon-book:before {
    content: "\e939";
  }
  
  .tn-icon-email-fill:before {
    content: "\e93a";
  }
  
  .tn-icon-maths:before {
    content: "\e92f";
  }
  
  .tn-icon-molecule:before {
    content: "\e930";
  }
  
  .tn-icon-ghost:before {
    content: "\e92d";
  }
  
  .tn-icon-money-fill:before {
    content: "\e92e";
  }
  
  .tn-icon-menu-alone:before {
    content: "\e929";
  }
  
  .tn-icon-menu-alone-fill:before {
    content: "\e92a";
  }
  
  .tn-icon-tree:before {
    content: "\e92b";
  }
  
  .tn-icon-rabbit:before {
    content: "\e92c";
  }
  
  .tn-icon-block-fill:before {
    content: "\e925";
  }
  
  .tn-icon-block:before {
    content: "\e926";
  }
  
  .tn-icon-menu-classify:before {
    content: "\e927";
  }
  
  .tn-icon-menu-classify-fill:before {
    content: "\e928";
  }
  
  .tn-icon-home-totop-fill:before {
    content: "\e923";
  }
  
  .tn-icon-home-totop:before {
    content: "\e924";
  }
  
  .tn-icon-petal:before {
    content: "\e920";
  }
  
  .tn-icon-clover-fill:before {
    content: "\e921";
  }
  
  .tn-icon-clover:before {
    content: "\e922";
  }
  
  .tn-icon-heartbeat:before {
    content: "\e917";
  }
  
  .tn-icon-paperbag:before {
    content: "\e918";
  }
  
  .tn-icon-paperbag-fill:before {
    content: "\e919";
  }
  
  .tn-icon-menu-match:before {
    content: "\e91a";
  }
  
  .tn-icon-menu-match-fill:before {
    content: "\e91b";
  }
  
  .tn-icon-sofa-fill:before {
    content: "\e91c";
  }
  
  .tn-icon-fullscreen:before {
    content: "\e91d";
  }
  
  .tn-icon-narrow:before {
    content: "\e91e";
  }
  
  .tn-icon-smallscreen:before {
    content: "\e91f";
  }
  
  .tn-icon-payment-wechat:before {
    content: "\e90a";
  }
  
  .tn-icon-cursor:before {
    content: "\e912";
  }
  
  .tn-icon-cursor-fill:before {
    content: "\e913";
  }
  
  .tn-icon-check:before {
    content: "\e914";
  }
  
  .tn-icon-payment-alipay:before {
    content: "\e915";
  }
  
  .tn-icon-dashboard:before {
    content: "\e90b";
  }
  
  .tn-icon-module:before {
    content: "\e90c";
  }
  
  .tn-icon-at-sign:before {
    content: "\e90d";
  }
  
  .tn-icon-copyright:before {
    content: "\e90e";
  }
  
  .tn-icon-pin:before {
    content: "\e90f";
  }
  
  .tn-icon-module-fill:before {
    content: "\e910";
  }
  
  .tn-icon-dashboard-fill:before {
    content: "\e911";
  }
  
  .tn-icon-birthday:before {
    content: "\e905";
  }
  
  .tn-icon-sofa:before {
    content: "\e906";
  }
  
  .tn-icon-iot:before {
    content: "\e907";
  }
  
  .tn-icon-monitor:before {
    content: "\e908";
  }
  
  .tn-icon-iot-fill:before {
    content: "\e909";
  }
  
  .tn-icon-text-zgs:before {
    content: "\e8ff";
  }
  
  .tn-icon-tabs-smile:before {
    content: "\e900";
  }
  
  .tn-icon-huawei:before {
    content: "\e901";
  }
  
  .tn-icon-iphone:before {
    content: "\e902";
  }
  
  .tn-icon-tiktok:before {
    content: "\e903";
  }
  
  .tn-icon-sword-fill:before {
    content: "\e8fa";
  }
  
  .tn-icon-job-fill:before {
    content: "\e8fb";
  }
  
  .tn-icon-rocket-fill:before {
    content: "\e8fc";
  }
  
  .tn-icon-totop:before {
    content: "\e8fd";
  }
  
  .tn-icon-totop-fill:before {
    content: "\e8fe";
  }
  
  .tn-icon-logout:before {
    content: "\e8f8";
  }
  
  .tn-icon-login:before {
    content: "\e8f9";
  }
  
  .tn-icon-expand:before {
    content: "\e8f7";
  }
  
  .tn-icon-bug:before {
    content: "\e8e3";
  }
  
  .tn-icon-bug-fill:before {
    content: "\e8e4";
  }
  
  .tn-icon-company-fill:before {
    content: "\e8e5";
  }
  
  .tn-icon-edit-write-fill:before {
    content: "\e8e6";
  }
  
  .tn-icon-menu-circle-fill:before {
    content: "\e8e7";
  }
  
  .tn-icon-level-fill:before {
    content: "\e8e8";
  }
  
  .tn-icon-menu-fill:before {
    content: "\e8e9";
  }
  
  .tn-icon-science-fill:before {
    content: "\e8ea";
  }
  
  .tn-icon-deploy-fill:before {
    content: "\e8eb";
  }
  
  .tn-icon-menu-more-fill:before {
    content: "\e8ec";
  }
  
  .tn-icon-search-menu-fill:before {
    content: "\e8ed";
  }
  
  .tn-icon-organizatio-fill:before {
    content: "\e8ee";
  }
  
  .tn-icon-platform-fill:before {
    content: "\e8ef";
  }
  
  .tn-icon-platform:before {
    content: "\e8f0";
  }
  
  .tn-icon-search-list-fill:before {
    content: "\e8f1";
  }
  
  .tn-icon-menu-sort-fill:before {
    content: "\e8f2";
  }
  
  .tn-icon-cube-fill:before {
    content: "\e8f3";
  }
  
  .tn-icon-menu-sorts-fill:before {
    content: "\e8f4";
  }
  
  .tn-icon-server-fill:before {
    content: "\e8f5";
  }
  
  .tn-icon-menu-list-fill:before {
    content: "\e8f6";
  }
  
  .tn-icon-errands:before {
    content: "\e8df";
  }
  
  .tn-icon-errands-fill:before {
    content: "\e8e0";
  }
  
  .tn-icon-delivery-fill:before {
    content: "\e8e1";
  }
  
  .tn-icon-delivery:before {
    content: "\e8e2";
  }
  
  .tn-icon-vip-text:before {
    content: "\e8dc";
  }
  
  .tn-icon-panda:before {
    content: "\e8dd";
  }
  
  .tn-icon-logo-shangpu:before {
    content: "\e8de";
  }
  
  .tn-icon-mouse:before {
    content: "\e8db";
  }
  
  .tn-icon-notebook-fill:before {
    content: "\e8da";
  }
  
  .tn-icon-headset:before {
    content: "\e8d8";
  }
  
  .tn-icon-shears:before {
    content: "\e8d9";
  }
  
  .tn-icon-notebook:before {
    content: "\e8d7";
  }
  
  .tn-icon-battery-empty:before {
    content: "\e8d1";
  }
  
  .tn-icon-battery-low:before {
    content: "\e8d2";
  }
  
  .tn-icon-battery-mid:before {
    content: "\e8d3";
  }
  
  .tn-icon-battery-high:before {
    content: "\e8d4";
  }
  
  .tn-icon-battery-full:before {
    content: "\e8d5";
  }
  
  .tn-icon-bluetooth:before {
    content: "\e8d6";
  }
  
  .tn-icon-science:before {
    content: "\e8cf";
  }
  
  .tn-icon-clip:before {
    content: "\e8d0";
  }
  
  .tn-icon-con-aquarius:before {
    content: "\e8c2";
  }
  
  .tn-icon-con-pisces:before {
    content: "\e8c3";
  }
  
  .tn-icon-con-aries:before {
    content: "\e8c4";
  }
  
  .tn-icon-con-taurus:before {
    content: "\e8c5";
  }
  
  .tn-icon-con-gemini:before {
    content: "\e8c6";
  }
  
  .tn-icon-con-cancer:before {
    content: "\e8c7";
  }
  
  .tn-icon-con-leo:before {
    content: "\e8c8";
  }
  
  .tn-icon-con-virgo:before {
    content: "\e8c9";
  }
  
  .tn-icon-con-libra:before {
    content: "\e8ca";
  }
  
  .tn-icon-con-scorpio:before {
    content: "\e8cb";
  }
  
  .tn-icon-con-sagittarius:before {
    content: "\e8cc";
  }
  
  .tn-icon-con-apricorn:before {
    content: "\e8cd";
  }
  
  .tn-icon-constellation:before {
    content: "\e8ce";
  }
  
  .tn-icon-wea-cloud-more:before {
    content: "\e8b9";
  }
  
  .tn-icon-wea-cloud:before {
    content: "\e8ba";
  }
  
  .tn-icon-wea-cloud-sun:before {
    content: "\e8bb";
  }
  
  .tn-icon-wea-rain:before {
    content: "\e8bc";
  }
  
  .tn-icon-wea-rain-middle:before {
    content: "\e8bd";
  }
  
  .tn-icon-wea-rain-heavy:before {
    content: "\e8be";
  }
  
  .tn-icon-wea-snow:before {
    content: "\e8bf";
  }
  
  .tn-icon-wea-wind:before {
    content: "\e8c0";
  }
  
  .tn-icon-wea-sun:before {
    content: "\e8c1";
  }
  
  .tn-icon-empty-data:before {
    content: "\e8ab";
  }
  
  .tn-icon-empty-message:before {
    content: "\e8ac";
  }
  
  .tn-icon-empty-cart:before {
    content: "\e8ad";
  }
  
  .tn-icon-empty-history:before {
    content: "\e8ae";
  }
  
  .tn-icon-empty-favor:before {
    content: "\e8af";
  }
  
  .tn-icon-empty-list:before {
    content: "\e8b0";
  }
  
  .tn-icon-empty-network:before {
    content: "\e8b1";
  }
  
  .tn-icon-empty-search:before {
    content: "\e8b2";
  }
  
  .tn-icon-empty-order:before {
    content: "\e8b3";
  }
  
  .tn-icon-empty-comment:before {
    content: "\e8b4";
  }
  
  .tn-icon-empty-coupon:before {
    content: "\e8b5";
  }
  
  .tn-icon-empty-address:before {
    content: "\e8b6";
  }
  
  .tn-icon-empty-permission:before {
    content: "\e8b7";
  }
  
  .tn-icon-empty-page:before {
    content: "\e8b8";
  }
  
  .tn-icon-job:before {
    content: "\e8aa";
  }
  
  .tn-icon-rocket:before {
    content: "\e8a5";
  }
  
  .tn-icon-sword:before {
    content: "\e8a6";
  }
  
  .tn-icon-notice-no:before {
    content: "\e8a7";
  }
  
  .tn-icon-notice-fill:before {
    content: "\e8a8";
  }
  
  .tn-icon-notice:before {
    content: "\e8a9";
  }
  
  .tn-icon-font:before {
    content: "\e8a4";
  }
  
  .tn-icon-chemistry:before {
    content: "\e8a3";
  }
  
  .tn-icon-biology:before {
    content: "\e8a2";
  }
  
  .tn-icon-level:before {
    content: "\e8a0";
  }
  
  .tn-icon-deploy:before {
    content: "\e8a1";
  }
  
  .tn-icon-server:before {
    content: "\e89f";
  }
  
  .tn-icon-cube:before {
    content: "\e89e";
  }
  
  .tn-icon-organizatio:before {
    content: "\e89d";
  }
  
  .tn-icon-company:before {
    content: "\e89c";
  }
  
  .tn-icon-pharmacy:before {
    content: "\e89b";
  }
  
  .tn-icon-medical:before {
    content: "\e89a";
  }
  
  .tn-icon-my-add:before {
    content: "\e898";
  }
  
  .tn-icon-my:before {
    content: "\e897";
  }
  
  .tn-icon-my-fill:before {
    content: "\e896";
  }
  
  .tn-icon-trust:before {
    content: "\e895";
  }
  
  .tn-icon-trust-fill:before {
    content: "\e894";
  }
  
  .tn-icon-moon:before {
    content: "\e893";
  }
  
  .tn-icon-moon-fill:before {
    content: "\e892";
  }
  
  .tn-icon-funds:before {
    content: "\e891";
  }
  
  .tn-icon-funds-fill:before {
    content: "\e890";
  }
  
  .tn-icon-signpost:before {
    content: "\e88f";
  }
  
  .tn-icon-signpost-fill:before {
    content: "\e88e";
  }
  
  .tn-icon-vip:before {
    content: "\e88d";
  }
  
  .tn-icon-vip-fill:before {
    content: "\e88c";
  }
  
  .tn-icon-hardware:before {
    content: "\e88b";
  }
  
  .tn-icon-hardware-fill:before {
    content: "\e88a";
  }
  
  .tn-icon-honor:before {
    content: "\e889";
  }
  
  .tn-icon-honor-fill:before {
    content: "\e888";
  }
  
  .tn-icon-count:before {
    content: "\e887";
  }
  
  .tn-icon-count-fill:before {
    content: "\e886";
  }
  
  .tn-icon-discover-planet:before {
    content: "\e885";
  }
  
  .tn-icon-discover-planet-fill:before {
    content: "\e884";
  }
  
  .tn-icon-discover:before {
    content: "\e883";
  }
  
  .tn-icon-discover-fill:before {
    content: "\e882";
  }
  
  .tn-icon-home:before {
    content: "\e881";
  }
  
  .tn-icon-home-fill:before {
    content: "\e880";
  }
  
  .tn-icon-home-vertical:before {
    content: "\e87f";
  }
  
  .tn-icon-home-vertical-fill:before {
    content: "\e87e";
  }
  
  .tn-icon-home-smile:before {
    content: "\e87d";
  }
  
  .tn-icon-home-smile-fill:before {
    content: "\e87c";
  }
  
  .tn-icon-home-capsule:before {
    content: "\e87b";
  }
  
  .tn-icon-home-capsule-fill:before {
    content: "\e87a";
  }
  
  .tn-icon-focus:before {
    content: "\e878";
  }
  
  .tn-icon-all:before {
    content: "\e877";
  }
  
  .tn-icon-assort-fill:before {
    content: "\e876";
  }
  
  .tn-icon-assort:before {
    content: "\e875";
  }
  
  .tn-icon-menu-list:before {
    content: "\e874";
  }
  
  .tn-icon-menu-sorts:before {
    content: "\e873";
  }
  
  .tn-icon-menu-sort:before {
    content: "\e872";
  }
  
  .tn-icon-menu-more:before {
    content: "\e871";
  }
  
  .tn-icon-menu:before {
    content: "\e870";
  }
  
  .tn-icon-menu-circle:before {
    content: "\e86f";
  }
  
  .tn-icon-search-menu:before {
    content: "\e86e";
  }
  
  .tn-icon-search-list:before {
    content: "\e86d";
  }
  
  .tn-icon-search:before {
    content: "\e86c";
  }
  
  .tn-icon-link:before {
    content: "\e86b";
  }
  
  .tn-icon-code:before {
    content: "\e869";
  }
  
  .tn-icon-computer:before {
    content: "\e868";
  }
  
  .tn-icon-computer-fill:before {
    content: "\e867";
  }
  
  .tn-icon-ipad:before {
    content: "\e866";
  }
  
  .tn-icon-ipad-fill:before {
    content: "\e865";
  }
  
  .tn-icon-phone:before {
    content: "\e864";
  }
  
  .tn-icon-phone-fill:before {
    content: "\e863";
  }
  
  .tn-icon-tel:before {
    content: "\e862";
  }
  
  .tn-icon-tel-circle-fill:before {
    content: "\e860";
  }
  
  .tn-icon-tel-circle:before {
    content: "\e861";
  }
  
  .tn-icon-watercup:before {
    content: "\e85f";
  }
  
  .tn-icon-gloves-fill:before {
    content: "\e85d";
  }
  
  .tn-icon-gloves:before {
    content: "\e85e";
  }
  
  .tn-icon-covid-19:before {
    content: "\e85c";
  }
  
  .tn-icon-sport-jog:before {
    content: "\e858";
  }
  
  .tn-icon-sport-run:before {
    content: "\e859";
  }
  
  .tn-icon-sport-swim:before {
    content: "\e85a";
  }
  
  .tn-icon-sport-cycle:before {
    content: "\e85b";
  }
  
  .tn-icon-airplane:before {
    content: "\e857";
  }
  
  .tn-icon-train:before {
    content: "\e855";
  }
  
  .tn-icon-steamship:before {
    content: "\e856";
  }
  
  .tn-icon-bus:before {
    content: "\e854";
  }
  
  .tn-icon-balancecar:before {
    content: "\e853";
  }
  
  .tn-icon-electromobile:before {
    content: "\e852";
  }
  
  .tn-icon-zodiac-zhu:before {
    content: "\e851";
  }
  
  .tn-icon-zodiac-gou:before {
    content: "\e850";
  }
  
  .tn-icon-zodiac-ji:before {
    content: "\e84f";
  }
  
  .tn-icon-zodiac-hou:before {
    content: "\e84e";
  }
  
  .tn-icon-zodiac-yang:before {
    content: "\e84d";
  }
  
  .tn-icon-zodiac-ma:before {
    content: "\e84c";
  }
  
  .tn-icon-zodiac-she:before {
    content: "\e84b";
  }
  
  .tn-icon-zodiac-long:before {
    content: "\e84a";
  }
  
  .tn-icon-zodiac-tu:before {
    content: "\e849";
  }
  
  .tn-icon-zodiac-hu:before {
    content: "\e848";
  }
  
  .tn-icon-zodiac-niu:before {
    content: "\e847";
  }
  
  .tn-icon-zodiac-shu:before {
    content: "\e846";
  }
  
  .tn-icon-lucky-money:before {
    content: "\e844";
  }
  
  .tn-icon-lucky-money-fill:before {
    content: "\e845";
  }
  
  .tn-icon-prize:before {
    content: "\e842";
  }
  
  .tn-icon-gift:before {
    content: "\e843";
  }
  
  .tn-icon-pay:before {
    content: "\e841";
  }
  
  .tn-icon-refund:before {
    content: "\e840";
  }
  
  .tn-icon-money:before {
    content: "\e83f";
  }
  
  .tn-icon-power:before {
    content: "\e83e";
  }
  
  .tn-icon-fingerprint:before {
    content: "\e83d";
  }
  
  .tn-icon-qr-beibei:before {
    content: "\e83c";
  }
  
  .tn-icon-qr-code:before {
    content: "\e83b";
  }
  
  .tn-icon-qr-barcode:before {
    content: "\e83a";
  }
  
  .tn-icon-scan:before {
    content: "\e839";
  }
  
  .tn-icon-revoke:before {
    content: "\e837";
  }
  
  .tn-icon-filter:before {
    content: "\e838";
  }
  
  .tn-icon-upload:before {
    content: "\e835";
  }
  
  .tn-icon-download:before {
    content: "\e836";
  }
  
  .tn-icon-fork:before {
    content: "\e832";
  }
  
  .tn-icon-relation:before {
    content: "\e833";
  }
  
  .tn-icon-master:before {
    content: "\e834";
  }
  
  .tn-icon-facebook:before {
    content: "\e82e";
  }
  
  .tn-icon-google:before {
    content: "\e82f";
  }
  
  .tn-icon-linkedin:before {
    content: "\e830";
  }
  
  .tn-icon-twitter:before {
    content: "\e831";
  }
  
  .tn-icon-logo-tuniao:before {
    content: "\e82d";
  }
  
  .tn-icon-sina:before {
    content: "\e82b";
  }
  
  .tn-icon-taobao:before {
    content: "\e82c";
  }
  
  .tn-icon-gitee:before {
    content: "\e82a";
  }
  
  .tn-icon-github:before {
    content: "\e829";
  }
  
  .tn-icon-dingtalk:before {
    content: "\e828";
  }
  
  .tn-icon-alipay:before {
    content: "\e827";
  }
  
  .tn-icon-qq:before {
    content: "\e826";
  }
  
  .tn-icon-moments:before {
    content: "\e825";
  }
  
  .tn-icon-wechat:before {
    content: "\e824";
  }
  
  .tn-icon-wechat-fill:before {
    content: "\e823";
  }
  
  .tn-icon-service:before {
    content: "\e821";
  }
  
  .tn-icon-service-fill:before {
    content: "\e822";
  }
  
  .tn-icon-team:before {
    content: "\e81f";
  }
  
  .tn-icon-team-fill:before {
    content: "\e820";
  }
  
  .tn-icon-emoji-sad:before {
    content: "\e81e";
  }
  
  .tn-icon-emoji-sad-fill:before {
    content: "\e81d";
  }
  
  .tn-icon-emoji-general:before {
    content: "\e81b";
  }
  
  .tn-icon-emoji-general-fill:before {
    content: "\e818";
  }
  
  .tn-icon-emoji-good:before {
    content: "\e817";
  }
  
  .tn-icon-emoji-good-fill:before {
    content: "\e816";
  }
  
  .tn-icon-clock:before {
    content: "\e812";
  }
  
  .tn-icon-clock-fill:before {
    content: "\e813";
  }
  
  .tn-icon-time-fill:before {
    content: "\e7d9";
  }
  
  .tn-icon-time:before {
    content: "\e7dc";
  }
  
  .tn-icon-footprint:before {
    content: "\e7d8";
  }
  
  .tn-icon-delete:before {
    content: "\e7d6";
  }
  
  .tn-icon-delete-fill:before {
    content: "\e7d7";
  }
  
  .tn-icon-clear:before {
    content: "\e7d5";
  }
  
  .tn-icon-set:before {
    content: "\e7d1";
  }
  
  .tn-icon-set-fill:before {
    content: "\e7d2";
  }
  
  .tn-icon-keyboard-circle:before {
    content: "\e810";
  }
  
  .tn-icon-keyboard:before {
    content: "\e811";
  }
  
  .tn-icon-wifi-no:before {
    content: "\e81c";
  }
  
  .tn-icon-wifi:before {
    content: "\e7d0";
  }
  
  .tn-icon-creative-stop:before {
    content: "\e819";
  }
  
  .tn-icon-creative-stop-fill:before {
    content: "\e81a";
  }
  
  .tn-icon-creative-fill:before {
    content: "\e80e";
  }
  
  .tn-icon-creative:before {
    content: "\e80f";
  }
  
  .tn-icon-trophy-fill:before {
    content: "\e80a";
  }
  
  .tn-icon-trophy:before {
    content: "\e80b";
  }
  
  .tn-icon-game-fill:before {
    content: "\e808";
  }
  
  .tn-icon-game:before {
    content: "\e809";
  }
  
  .tn-icon-tag-fill:before {
    content: "\e806";
  }
  
  .tn-icon-tag:before {
    content: "\e807";
  }
  
  .tn-icon-logistics:before {
    content: "\e7cf";
  }
  
  .tn-icon-taxi-fill:before {
    content: "\e800";
  }
  
  .tn-icon-taxi:before {
    content: "\e805";
  }
  
  .tn-icon-flag:before {
    content: "\e7f5";
  }
  
  .tn-icon-flag-fill:before {
    content: "\e7ff";
  }
  
  .tn-icon-baby:before {
    content: "\e7f1";
  }
  
  .tn-icon-baby-fill:before {
    content: "\e7f4";
  }
  
  .tn-icon-shop:before {
    content: "\e7cd";
  }
  
  .tn-icon-shop-fill:before {
    content: "\e7ce";
  }
  
  .tn-icon-coupon-fill:before {
    content: "\e7c8";
  }
  
  .tn-icon-coupon:before {
    content: "\e7c9";
  }
  
  .tn-icon-shopbag-fill:before {
    content: "\e7c6";
  }
  
  .tn-icon-shopbag:before {
    content: "\e7c7";
  }
  
  .tn-icon-basket-fill:before {
    content: "\e7c4";
  }
  
  .tn-icon-basket:before {
    content: "\e7c5";
  }
  
  .tn-icon-cart-fill:before {
    content: "\e7c2";
  }
  
  .tn-icon-cart:before {
    content: "\e7c3";
  }
  
  .tn-icon-ticket:before {
    content: "\e7f8";
  }
  
  .tn-icon-ticket-fill:before {
    content: "\e7fe";
  }
  
  .tn-icon-receipt:before {
    content: "\e7f6";
  }
  
  .tn-icon-receipt-fill:before {
    content: "\e7f7";
  }
  
  .tn-icon-cardbag:before {
    content: "\e7fa";
  }
  
  .tn-icon-cardbag-fill:before {
    content: "\e7fd";
  }
  
  .tn-icon-bankcard-fill:before {
    content: "\e7d3";
  }
  
  .tn-icon-bankcard:before {
    content: "\e7d4";
  }
  
  .tn-icon-identity:before {
    content: "\e7cb";
  }
  
  .tn-icon-identity-fill:before {
    content: "\e7cc";
  }
  
  .tn-icon-calendar:before {
    content: "\e7c0";
  }
  
  .tn-icon-calendar-fill:before {
    content: "\e7c1";
  }
  
  .tn-icon-order:before {
    content: "\e7be";
  }
  
  .tn-icon-order-fill:before {
    content: "\e7bf";
  }
  
  .tn-icon-image:before {
    content: "\e7bc";
  }
  
  .tn-icon-image-fill:before {
    content: "\e7bd";
  }
  
  .tn-icon-image-text:before {
    content: "\e7bb";
  }
  
  .tn-icon-image-text-fill:before {
    content: "\e7ba";
  }
  
  .tn-icon-data:before {
    content: "\e7b9";
  }
  
  .tn-icon-data-fill:before {
    content: "\e7b8";
  }
  
  .tn-icon-statistics:before {
    content: "\e7b7";
  }
  
  .tn-icon-statistics-fill:before {
    content: "\e7b6";
  }
  
  .tn-icon-trusty-fill:before {
    content: "\e801";
  }
  
  .tn-icon-trusty:before {
    content: "\e802";
  }
  
  .tn-icon-safe-fill:before {
    content: "\e803";
  }
  
  .tn-icon-safe:before {
    content: "\e804";
  }
  
  .tn-icon-edit:before {
    content: "\e7b5";
  }
  
  .tn-icon-edit-form:before {
    content: "\e7b4";
  }
  
  .tn-icon-edit-write:before {
    content: "\e7b3";
  }
  
  .tn-icon-write-fill:before {
    content: "\e7b1";
  }
  
  .tn-icon-write:before {
    content: "\e7b2";
  }
  
  .tn-icon-eye-hide:before {
    content: "\e7af";
  }
  
  .tn-icon-eye-close:before {
    content: "\e7b0";
  }
  
  .tn-icon-eye:before {
    content: "\e7ad";
  }
  
  .tn-icon-eye-fill:before {
    content: "\e7ae";
  }
  
  .tn-icon-unlock:before {
    content: "\e7da";
  }
  
  .tn-icon-lock:before {
    content: "\e7db";
  }
  
  .tn-icon-sex:before {
    content: "\e7ac";
  }
  
  .tn-icon-sex-female:before {
    content: "\e7ab";
  }
  
  .tn-icon-sex-male:before {
    content: "\e7aa";
  }
  
  .tn-icon-circle-lack:before {
    content: "\e7a8";
  }
  
  .tn-icon-circle-arrow:before {
    content: "\e7a9";
  }
  
  .tn-icon-circle-fill:before {
    content: "\e7a4";
  }
  
  .tn-icon-circle:before {
    content: "\e7a3";
  }
  
  .tn-icon-copy-fill:before {
    content: "\e7a1";
  }
  
  .tn-icon-copy:before {
    content: "\e7a2";
  }
  
  .tn-icon-square:before {
    content: "\e7a0";
  }
  
  .tn-icon-group-double:before {
    content: "\e79e";
  }
  
  .tn-icon-group-square:before {
    content: "\e79f";
  }
  
  .tn-icon-group-triangle:before {
    content: "\e795";
  }
  
  .tn-icon-group-circle:before {
    content: "\e796";
  }
  
  .tn-icon-group-null:before {
    content: "\e797";
  }
  
  .tn-icon-share-triangle:before {
    content: "\e792";
  }
  
  .tn-icon-share-square:before {
    content: "\e790";
  }
  
  .tn-icon-share-circle:before {
    content: "\e791";
  }
  
  .tn-icon-share:before {
    content: "\e78f";
  }
  
  .tn-icon-send-fill:before {
    content: "\e793";
  }
  
  .tn-icon-send:before {
    content: "\e794";
  }
  
  .tn-icon-light-fill:before {
    content: "\e78d";
  }
  
  .tn-icon-light:before {
    content: "\e78e";
  }
  
  .tn-icon-praise-fill:before {
    content: "\e7eb";
  }
  
  .tn-icon-praise:before {
    content: "\e7f0";
  }
  
  .tn-icon-star-fill:before {
    content: "\e78b";
  }
  
  .tn-icon-star:before {
    content: "\e78c";
  }
  
  .tn-icon-caring:before {
    content: "\e789";
  }
  
  .tn-icon-caring-fill:before {
    content: "\e78a";
  }
  
  .tn-icon-fire:before {
    content: "\e787";
  }
  
  .tn-icon-fire-fill:before {
    content: "\e788";
  }
  
  .tn-icon-topic:before {
    content: "\e786";
  }
  
  .tn-icon-topics:before {
    content: "\e784";
  }
  
  .tn-icon-topics-fill:before {
    content: "\e785";
  }
  
  .tn-icon-like-break:before {
    content: "\e782";
  }
  
  .tn-icon-like-lack:before {
    content: "\e783";
  }
  
  .tn-icon-like:before {
    content: "\e781";
  }
  
  .tn-icon-like-fill:before {
    content: "\e780";
  }
  
  .tn-icon-reply:before {
    content: "\e7a6";
  }
  
  .tn-icon-reply-fill:before {
    content: "\e7a7";
  }
  
  .tn-icon-comment-fill:before {
    content: "\e79c";
  }
  
  .tn-icon-comment:before {
    content: "\e79d";
  }
  
  .tn-icon-message-fill:before {
    content: "\e798";
  }
  
  .tn-icon-message:before {
    content: "\e799";
  }
  
  .tn-icon-flower-fill:before {
    content: "\e77e";
  }
  
  .tn-icon-flower:before {
    content: "\e77f";
  }
  
  .tn-icon-location-fill:before {
    content: "\e77c";
  }
  
  .tn-icon-location:before {
    content: "\e77d";
  }
  
  .tn-icon-map-fill:before {
    content: "\e77a";
  }
  
  .tn-icon-map:before {
    content: "\e77b";
  }
  
  .tn-icon-camera:before {
    content: "\e774";
  }
  
  .tn-icon-camera-fill:before {
    content: "\e775";
  }
  
  .tn-icon-live-stream:before {
    content: "\e7fb";
  }
  
  .tn-icon-live-stream-fill:before {
    content: "\e7fc";
  }
  
  .tn-icon-sing:before {
    content: "\e7f9";
  }
  
  .tn-icon-music-fill:before {
    content: "\e7ec";
  }
  
  .tn-icon-music-stop:before {
    content: "\e7ed";
  }
  
  .tn-icon-video-fill:before {
    content: "\e7e9";
  }
  
  .tn-icon-video:before {
    content: "\e7ea";
  }
  
  .tn-icon-voice-fill:before {
    content: "\e7e7";
  }
  
  .tn-icon-voice:before {
    content: "\e7e8";
  }
  
  .tn-icon-previous-fill:before {
    content: "\e7f2";
  }
  
  .tn-icon-next-fill:before {
    content: "\e7f3";
  }
  
  .tn-icon-play-fill:before {
    content: "\e7ee";
  }
  
  .tn-icon-stop:before {
    content: "\e7ef";
  }
  
  .tn-icon-backspace:before {
    content: "\e814";
  }
  
  .tn-icon-backspace-fill:before {
    content: "\e815";
  }
  
  .tn-icon-sound-close-fill:before {
    content: "\e778";
  }
  
  .tn-icon-sound-close:before {
    content: "\e779";
  }
  
  .tn-icon-sound-fill:before {
    content: "\e776";
  }
  
  .tn-icon-sound:before {
    content: "\e777";
  }
  
  .tn-icon-sound-reduce-fill:before {
    content: "\e7e5";
  }
  
  .tn-icon-sound-reduce:before {
    content: "\e7e6";
  }
  
  .tn-icon-sound-add:before {
    content: "\e80c";
  }
  
  .tn-icon-sound-add-fill:before {
    content: "\e80d";
  }
  
  .tn-icon-sequence-vertical:before {
    content: "\e79a";
  }
  
  .tn-icon-sequence:before {
    content: "\e79b";
  }
  
  .tn-icon-align-center:before {
    content: "\e7e1";
  }
  
  .tn-icon-align-right:before {
    content: "\e7e2";
  }
  
  .tn-icon-align-left:before {
    content: "\e7e3";
  }
  
  .tn-icon-align:before {
    content: "\e7e4";
  }
  
  .tn-icon-title:before {
    content: "\e772";
  }
  
  .tn-icon-sort:before {
    content: "\e773";
  }
  
  .tn-icon-more-vertical:before {
    content: "\e770";
  }
  
  .tn-icon-more-horizontal:before {
    content: "\e771";
  }
  
  .tn-icon-more-circle:before {
    content: "\e76e";
  }
  
  .tn-icon-more-circle-fill:before {
    content: "\e76f";
  }
  
  .tn-icon-warning:before {
    content: "\e76c";
  }
  
  .tn-icon-warning-fill:before {
    content: "\e76d";
  }
  
  .tn-icon-zoom-out:before {
    content: "\e76a";
  }
  
  .tn-icon-zoom-out-fill:before {
    content: "\e76b";
  }
  
  .tn-icon-zoom-in-fill:before {
    content: "\e768";
  }
  
  .tn-icon-zoom-in:before {
    content: "\e769";
  }
  
  .tn-icon-success-square:before {
    content: "\e763";
  }
  
  .tn-icon-success-circle-fill:before {
    content: "\e764";
  }
  
  .tn-icon-success-circle:before {
    content: "\e765";
  }
  
  .tn-icon-success-square-fill:before {
    content: "\e766";
  }
  
  .tn-icon-success:before {
    content: "\e767";
  }
  
  .tn-icon-close-fill:before {
    content: "\e760";
  }
  
  .tn-icon-close:before {
    content: "\e761";
  }
  
  .tn-icon-close-circle:before {
    content: "\e762";
  }
  
  .tn-icon-help:before {
    content: "\e75e";
  }
  
  .tn-icon-help-fill:before {
    content: "\e75f";
  }
  
  .tn-icon-tips:before {
    content: "\e75c";
  }
  
  .tn-icon-tip-fill:before {
    content: "\e75d";
  }
  
  .tn-icon-left:before {
    content: "\e7e0";
  }
  
  .tn-icon-left-triangle:before {
    content: "\e757";
  }
  
  .tn-icon-left-fill:before {
    content: "\e758";
  }
  
  .tn-icon-left-double:before {
    content: "\e759";
  }
  
  .tn-icon-left-circle:before {
    content: "\e75a";
  }
  
  .tn-icon-left-arrow:before {
    content: "\e75b";
  }
  
  .tn-icon-down:before {
    content: "\e7df";
  }
  
  .tn-icon-down-arrow:before {
    content: "\e752";
  }
  
  .tn-icon-down-circle:before {
    content: "\e753";
  }
  
  .tn-icon-down-double:before {
    content: "\e754";
  }
  
  .tn-icon-down-fill:before {
    content: "\e755";
  }
  
  .tn-icon-down-triangle:before {
    content: "\e756";
  }
  
  .tn-icon-right:before {
    content: "\e7de";
  }
  
  .tn-icon-right-fill:before {
    content: "\e74d";
  }
  
  .tn-icon-right-arrow:before {
    content: "\e74e";
  }
  
  .tn-icon-right-double:before {
    content: "\e74f";
  }
  
  .tn-icon-right-triangle:before {
    content: "\e750";
  }
  
  .tn-icon-right-circle:before {
    content: "\e751";
  }
  
  .tn-icon-up:before {
    content: "\e7dd";
  }
  
  .tn-icon-up-arrow:before {
    content: "\e748";
  }
  
  .tn-icon-up-circle:before {
    content: "\e749";
  }
  
  .tn-icon-up-triangle:before {
    content: "\e74a";
  }
  
  .tn-icon-up-double:before {
    content: "\e74b";
  }
  
  .tn-icon-up-fill:before {
    content: "\e74c";
  }
  
  .tn-icon-add-circle:before {
    content: "\e740";
  }
  
  .tn-icon-add:before {
    content: "\e741";
  }
  
  .tn-icon-add-fill:before {
    content: "\e742";
  }
  
  .tn-icon-reduce:before {
    content: "\e743";
  }
  
  .tn-icon-reduce-square-fill:before {
    content: "\e744";
  }
  
  .tn-icon-reduce-square:before {
    content: "\e745";
  }
  
  .tn-icon-reduce-circle:before {
    content: "\e746";
  }
  
  .tn-icon-reduce-circle-fill:before {
    content: "\e747";
  }
</style>
